<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>event-target &lsaquo; KISSY Docs</title>
<link rel="stylesheet" href="../assets/base-min.css" />
<link rel="stylesheet" href="../assets/docs.css" />
</head>
<body class="w866">
<div id="header">
    <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
    <p class="rel-nav">
        <a href="http://github.com/kissyteam/kissy/blob/master/src/event/event-target.js"><code>event-target.js</code></a>
    </p>
</div>
<div id="content" class="layout grid-s232m0">
    <div class="col-main">
        <div class="main-wrap">

            <div class="section summary">
                <p>在标准浏览器下，给一个链接添加点击事件：</p>
<pre style="padding-top: 0"><code>
    var a = document.getElementById('someId');
    a.addEventListener('click', function(ev) {
        // do something
    });
</code></pre>
                <p>拥有 addEventListener 等事件操作方法的对象，有一个统一的名称：Event Target（事件目标对象）。其共同特点是：能触发、添加和删除事件。</p>
                <p>DOM 元素节点都是事件目标对象，但我们还经常需要让自定义对象也能触发、添加和删除事件。KISSY.EventTarget 可以让你很容易做到这一点。</p>
            </div>

            <div class="section">
                <h3 id="methods">Methods</h3>

                <div class="member method">
                    <h4>
                        <a name="method_fire">fire</a>
                        <code><em>fire</em>(type, eventData)</code>
                    </h4>
                    <div class="detail">
                        <p>触发自定义事件。</p>
                        <p class="notice">注：该方法的返回值取决于事件监听函数的返回值，一般情况下无返回值。</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_on">on</a>
                        <code>void <em>on</em>(type, fn)</code>
                    </h4>
                    <div class="detail">
                        <p>添加监听函数。</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_detach">detach</a>
                        <code>void <em>detach</em>(type, fn)</code>
                    </h4>
                    <div class="detail">
                        <p>移除监听函数。</p>
                    </div>
                </div>

            </div>

            <div class="section">
                <h3>Examples</h3>
                <p>来看一个简单示例：</p>
<pre class="example-code"><code>
var S = KISSY;

// 定义 Dog 类
function Dog(name) {
    this.name = name;
}

// 让 Dog 成为事件目标
S.augment(Dog, S.EventTarget);

// 给 Dog 添加 run 方法
S.augment(Dog, {
   run: function() {
       // 触发 running 事件
       this.fire('running', {speed: '80km/h'});
   }
});

var dog = new Dog('Lady Gogo');

// 添加监听函数
dog.on('running', function(ev) {
    // 注意 ev 的参数传递大使身份
    alert(this.name + ' is running now. Its speed is ' + ev.speed);
});

// 让可爱的小狗跑起来吧
dog.run();
</code></pre>
                <p class="tips">为了让学习效果最佳，就不提供示范页面了。建议将上面的代码手工输入运行一遍，不要偷懒^o^</p>
            </div>

            <div class="section notes">
                <p>
                    有兴趣的可以进一步阅读 <a href="http://github.com/kissyteam/kissy/blob/master/src/event/event-target.js"><code>event-target.js</code></a> 源码。<br />
                    不要怀疑代码为何如此简单，世界本就应该简单，不是吗？
                </p>
                <p>
                    或许你已开始部分认可“只要你能想到，它基本上就能做到”。<br />
                    倘若还没感觉，请继续阅读 <a href="event-mouseenter.html">event-mouseenter</a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sub">
        <div class="sub-wrap">
            <div class="loc">
                <a href="../index.html">home</a> &rsaquo;
                <a href="index.html">event</a> &rsaquo;
                event-target :
            </div>
            <div class="toc">
                <h3>Methods</h3>
                <ul>
                    <li><a href="#method_fire">fire</a></li>
                    <li><a href="#method_on">on</a></li>
                    <li><a href="#method_detach">detach</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
</div>
</body>
</html>
